Ext.require([ 'Ext.form.*', 'Ext.layout.container.Column', 'Ext.tab.Panel' ]);
Ext.require('*');
//Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
//Ext.require(['Ext.data.*']);

generateData = function(n, floor) {

	var data = [], p = (Math.random() * 11) + 1, i;

	floor = (!floor && floor !== 0) ? 20 : floor;

	for (i = 0; i < (n || 12); i++) {
		data.push({
			name : Ext.Date.monthNames[i % 12],
			data1 : Math.floor(Math.max((Math.random() * 100), floor)),
			data2 : Math.floor(Math.max((Math.random() * 100), floor)),
			data3 : Math.floor(Math.max((Math.random() * 100), floor)),
			data4 : Math.floor(Math.max((Math.random() * 100), floor)),
			data5 : Math.floor(Math.max((Math.random() * 100), floor)),
			data6 : Math.floor(Math.max((Math.random() * 100), floor)),
			data7 : Math.floor(Math.max((Math.random() * 100), floor))
		});
	}
	return data;
};


Ext.onReady(function() {

			Ext.QuickTips.init();

			//modelo de los datos a graficar
			Ext.define('TestModel', {
				extend : 'Ext.data.Model',
				fields : [ 'pulso1', 'pulso2', 'pulso3', 'tiempo' ]
			});
			
			
			// Store de los datos a graficar
			var store = Ext.create('Ext.data.Store', {
				model : 'TestModel',
				data : [ {
					pulso1 : 5.8,
					pulso2 : 2.8,
					pulso3 : 4.4,
					tiempo : 1
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 2
				}, {
					pulso1 : 7.3,
					pulso2 : 2.3,
					pulso3 : 6.8,
					tiempo : 3
				}, {
					pulso1 : 7.8,
					pulso2 : 5.0,
					pulso3 : 9.8,
					tiempo : 4
				}, {
					pulso1 : 8.1,
					pulso2 : 8.1,
					pulso3 : 2.8,
					tiempo : 5
				}, {
					pulso1 : 3.2,
					pulso2 : 1.8,
					pulso3 : 4.8,
					tiempo : 6
				}, {
					pulso1 : 6.4,
					pulso2 : 2.3,
					pulso3 : 5.8,
					tiempo : 7
				}, {
					pulso1 : 8.8,
					pulso2 : 4.0,
					pulso3 : 1.8,
					tiempo : 8
				}, {
					pulso1 : 1.1,
					pulso2 : 1.5,
					pulso3 : 2.8,
					tiempo : 9
				}, {
					pulso1 : 5.8,
					pulso2 : 2.8,
					pulso3 : 4.4,
					tiempo : 10
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 11
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 12
				}, {
					pulso1 : 7.3,
					pulso2 : 2.3,
					pulso3 : 6.8,
					tiempo : 13
				}, {
					pulso1 : 7.8,
					pulso2 : 5.0,
					pulso3 : 9.8,
					tiempo : 14
				}, {
					pulso1 : 8.1,
					pulso2 : 8.1,
					pulso3 : 2.8,
					tiempo : 15
				}, {
					pulso1 : 3.2,
					pulso2 : 1.8,
					pulso3 : 4.8,
					tiempo : 16
				}, {
					pulso1 : 6.4,
					pulso2 : 2.3,
					pulso3 : 5.8,
					tiempo : 17
				}, {
					pulso1 : 8.8,
					pulso2 : 4.0,
					pulso3 : 1.8,
					tiempo : 18
				}, {
					pulso1 : 1.1,
					pulso2 : 1.5,
					pulso3 : 2.8,
					tiempo : 19
				}, {
					pulso1 : 1.1,
					pulso2 : 1.5,
					pulso3 : 2.8,
					tiempo : 20
				}, {
					pulso1 : 5.8,
					pulso2 : 2.8,
					pulso3 : 4.4,
					tiempo : 21
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 22
				}, {
					pulso1 : 7.3,
					pulso2 : 2.3,
					pulso3 : 6.8,
					tiempo : 23
				}, {
					pulso1 : 7.8,
					pulso2 : 5.0,
					pulso3 : 9.8,
					tiempo : 24
				}, {
					pulso1 : 8.1,
					pulso2 : 8.1,
					pulso3 : 2.8,
					tiempo : 25
				}, {
					pulso1 : 2.8,
					pulso2 : 7.8,
					pulso3 : 7.4,
					tiempo : 25
				}, {
					pulso1 : 3.2,
					pulso2 : 1.8,
					pulso3 : 4.8,
					tiempo : 26
				}, {
					pulso1 : 6.4,
					pulso2 : 2.3,
					pulso3 : 5.8,
					tiempo : 27
				}, {
					pulso1 : 8.8,
					pulso2 : 4.0,
					pulso3 : 1.8,
					tiempo : 28
				}, {
					pulso1 : 1.1,
					pulso2 : 1.5,
					pulso3 : 2.8,
					tiempo : 29
				}, {
					pulso1 : 5.8,
					pulso2 : 2.8,
					pulso3 : 4.4,
					tiempo : 30
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 31
				}, {
					pulso1 : 6.3,
					pulso2 : 4.8,
					pulso3 : 3.8,
					tiempo : 32
				}, {
					pulso1 : 7.3,
					pulso2 : 2.3,
					pulso3 : 6.8,
					tiempo : 33
				}, {
					pulso1 : 7.8,
					pulso2 : 5.0,
					pulso3 : 9.8,
					tiempo : 34
				}, {
					pulso1 : 8.1,
					pulso2 : 8.1,
					pulso3 : 2.8,
					tiempo : 35
				}, {
					pulso1 : 2.8,
					pulso2 : 7.8,
					pulso3 : 7.4,
					tiempo : 36
				}, {
					pulso1 : 3.2,
					pulso2 : 1.8,
					pulso3 : 4.8,
					tiempo : 37
				}, {
					pulso1 : 6.4,
					pulso2 : 2.3,
					pulso3 : 5.8,
					tiempo : 38
				}, {
					pulso1 : 8.8,
					pulso2 : 4.0,
					pulso3 : 1.8,
					tiempo : 39
				}, {
					pulso1 : 1.1,
					pulso2 : 1.5,
					pulso3 : 2.8,
					tiempo : 40
				},

				]
			});

			var chartRitmoCardiaco = Ext.create('Ext.chart.Chart', {
				//  renderTo: Ext.getBody(),
				width : 1300,
				height : 200,
				defaults : {
					anchor : '95%'

				},
				store : store,
				theme : 'Category1',
				legend : {
					position : 'right'
				},
				animate : 'true',
				shadow : true,
				axes : [ {
					title : 'Pulso',
					type : 'Numeric',
					position : 'left',
					fields : [ 'pulso1', 'pulso2', 'pulso3' ],
					minimum : 0,
					maximum : 10,
					grid : {
						odd : {
							opacity : 0.8,
							fill : '#ddd',
							stroke : '#bbb',
							'stroke-width' : 0.5
						}
					}
				}, {
					title : 'Tiempo',
					type : 'Numeric',
					position : 'bottom',
					fields : [ 'tiempo' ]

				} ],
				series : [ {
					type : 'line',
					highlight : {
						size : 1,
						radius : 1
					},
					xField : 'tiempo',
					yField : 'pulso1',
					smooth : false,
					fill : true,
					markerConfig : {
						type : 'circle',
						size : 1,
						radius : 1,
						'stroke-width' : 0
					},
					style : {
						opacity : 0.53
					}
				}, {
					type : 'line',
					highlight : {
						size : 1,
						radius : 1
					},
					axis : 'left',
					smooth : false,
					xField : 'tiempo',
					yField : 'pulso2',
					fill : true,
					markerConfig : {
						type : 'circle',
						size : 1,
						radius : 1,
						'stroke-width' : 0
					}
				}, {
					type : 'line',
					highlight : {
						size : 1,
						radius : 1
					},
					axis : 'left',
					smooth : false,
					fill : true,
					xField : 'tiempo',
					yField : 'pulso3',
					markerConfig : {
						type : 'circle',
						size : 1,
						radius : 1,
						'stroke-width' : 0
					}
				} ]
			});

			var panelZoomChart = Ext.create('Ext.form.Panel', {
				width : 800,
				height : 80,
				title : 'Zoom',
				bodyPadding : 10,
				defaultType : 'sliderfield',
				defaults : {
					anchor : '95%',
					tipText : function(thumb) {
						return String(thumb.value) + '%';
					}
				},
				items : [ {
					fieldLabel : 'Tiempo',
					value : 50,
					name : 'xlabel'
				} ],
				dockedItems : {
					xtype : 'toolbar',
					dock : 'bottom',
					ui : 'footer',
					items : [ {
						text : 'Aplicar',

						handler : function() {
							this.up('form').items.each(function(c) {
								c.setValue(100);
							});
						}
					} ]
				}

			/*,
			dockedItems: {
			   xtype: 'toolbar',
			   dock: 'bottom',
			   ui: 'footer',
			   items: [{
			       text: 'Max All',
			       handler: function(){
			           this.up('form').items.each(function(c){
			               c.setValue(100);
			           });
			       }
			   }, '->', {
			       text: 'Save',
			       handler: function(){
			           var values = this.up('form').getForm().getValues(),
			               s = ['Sounds Effects: <b>{0}%</b>',
			                   'Ambient Sounds: <b>{1}%</b>',
			                   'Interface Sounds: <b>{2}%</b>'];
			           
			           Ext.Msg.alert({
			               title: 'Settings Saved',
			               msg: Ext.String.format(s.join('<br />'), values.fx, values.ambient, values.iface),
			               icon: Ext.Msg.INFO,
			               buttons: Ext.Msg.OK
			           }); 
			       }
			   },{
			       text: 'Reset',
			       handler: function(){
			           this.up('form').getForm().reset();
			       }
			   }]
			}*/
			});

			var panelRitmoCardiaco = Ext.create('Ext.form.Panel', {
				bodyStyle : 'padding:5px',
				width : 405,
				collapsible : true,
				fieldDefaults : {
					labelAlign : 'top',
					msgTarget : 'side'
				},
				defaults : {
					anchor : '100%'
				},
				items : [ {
					layout : 'column',
					border : false,
					items : [ chartRitmoCardiaco ]
				} ]
			});

			//model de paciente
			Ext.define('Paciente', {
			    extend: 'Ext.data.Model',
			    fields: [
			        {name: 'idpaciente', type: 'string'},
			        {name: 'nombre',  type: 'string'},
			        {name: 'apPaterno',       type: 'string'},
			        {name: 'apMaterno',       type: 'string'},
			        {name: 'fechaNacimiento',       type: 'string'},
			        {name: 'direccion',       type: 'string'}
			    ]
			});
			
			//data.store de paciente
			var pacienteStore = new Ext.data.Store({
				pageSize : 10,
				model: 'Paciente',
			    proxy: {
			    	actionMethods: {
			            create: 'POST',
			            destroy: 'DELETE',
			            read: 'POST',
			            update: 'POST'
			        },
			        type: 'ajax',
			        url : urlAsynSearchLastName,
			        reader: {
			            type: 'json'
			        },
			        headers: {
	                	'Accept' : 'application/json',
	                	'Content-Type' : 'application/json'
	                }
			    }
			});
			

			var panelBuscarPaciente = Ext
					.create(
							'Ext.form.Panel',
							{
								title : 'Busqueda de paciente',
								bodyStyle : 'padding:5px',
								width : 800,
								fieldDefaults : {
									labelAlign : 'top',
									msgTarget : 'side'
								},
								defaults : {
									anchor : '100%'
								},
								items : [ {
									layout : 'column',
									border : false,
									items : [
											{
												xtype : 'label',
												forId : 'lblPaciente',
												text : 'Buscar paciente: ',
												margins : '0 0 0 10'
											},
											{
												xtype : 'combo',
												store : pacienteStore,
												displayField : 'Buscar',
												typeAhead : false,
												hideTrigger : true,
												labelWidth : 130,
												width : 280,
												anchor : '90%',
												listeners : {
													select : function(combo,
															axxx, index) {
														alert('alert');

													}

												},
												
												listConfig : {
													loadingText : 'Buscando...',
													emptyText : 'No se encontraron pacientes registrados.',

													getInnerTpl : function() {
														return '<h3><span> {idpaciente} {nombre} {apPaterno}  <br /> {apMaterno} {fechaNacimiento} {direccion} </span></h3>';
													}
												},
												pageSize : 10
											} ]
								} ]
							});

			var datosPaciente = Ext.create('Ext.form.Panel', {
				title : 'Pantalla Especialista',
				bodyStyle : 'padding:5px',
				width : 800,
				fieldDefaults : {
					labelAlign : 'top',
					msgTarget : 'side'
				},
				defaults : {
					anchor : '100%'
				},
				items : [ {
					xtype : 'tabpanel',
					plain : true,
					activeTab : 0,
					height : 235,
					defaults : {
						bodyStyle : 'padding:10px'
					},
					items : [ {
						title : 'Datos personales',
						defaults : {
							width : 230
						},
						defaultType : 'textfield',

						items : [ {
							fieldLabel : '',
							name : 'first',
							allowBlank : false,
							value : 'Jamie'
						}, {
							fieldLabel : 'Last Name',
							name : 'last',
							value : 'Avins'
						}, {
							fieldLabel : 'Company',
							name : 'company',
							value : 'Ext JS'
						}, {
							fieldLabel : 'Email',
							name : 'email',
							vtype : 'email'
						} ]
					}, {
						title : 'Datos familiares',
						defaults : {
							width : 230
						},
						defaultType : 'textfield',

						items : [ {
							fieldLabel : 'Home',
							name : 'home',
							value : '(888) 555-1212'
						}, {
							fieldLabel : 'Business',
							name : 'business'
						}, {
							fieldLabel : 'Mobile',
							name : 'mobile'
						}, {
							fieldLabel : 'Fax',
							name : 'fax'
						} ]
					}, {
						cls : 'x-plain',
						title : 'Mensaje al paciente',
						layout : 'fit',
						items : {
							xtype : 'htmleditor',
							name : 'bio2',
							fieldLabel : 'Mensaje'
						}
					} ]
				} ],

				buttons : [ {
					text : 'Save'
				}, {
					text : 'Cancel'
				} ]
			});

			// inicio panel Central
			var panelCentral = Ext.create('Ext.form.Panel', {
				bodyStyle : 'padding:5px',
				columns : 2,
				width : 800,
				collapsible : 'true',
				fieldDefaults : {
					labelAlign : 'top',
					msgTarget : 'side'
				},
				defaults : {
					anchor : '100%'
				},
				items : [ {/*TODO*/}, datosPaciente ]

			});

			var footer = Ext
					.create(
							'Ext.form.Panel',
							{
								bodyStyle : 'padding:5px',
								title : '<b> powered by Matersys Group S.A. de C.V. Angel Urraza 205 Col. Insugentes san Borja Tel (52) 55 55234488 </b>',
								align : 'center',
								width : 800,
								Defaults : {
									anchor : '100%'
								}
							});

			var panelEspecialista = Ext.create('Ext.form.Panel', {
				renderTo : 'contenedor',
				bodyStyle : 'padding:5px',
				columns : 1,
				width : 800,
				fieldDefaults : {
					labelAlign : 'top',
					msgTarget : 'side'
				},
				defaults : {
					anchor : '100%'
				},
				items : [ panelBuscarPaciente, datosPaciente,
						chartRitmoCardiaco, footer ]

			});

			panelEspecialista.render('contenedor');

			//   datosPaciente.render(document.body);
		});
